<template>
	<view>
		<view v-if="info==null">
			<zero-loading type="triangle"></zero-loading>
		</view>
		<view v-if="info!=null">
		<view class="top_nav_box">
			<navigation-custom :config="config" @customConduct="customConduct" />
		</view>
		<view class="page_item_bj"></view>
		<view class="page_content_box">
			<view :style="{height:statusHeight+'px'}"></view>
			<view class="iolation_reason_box">
				{{info.titile}}
			</view>
			<view class="order_content_box_heng"></view> 
			<view class="order_content_title">
				<view class="order_content_title_xian"></view>
				<view class="order_content_title_text">处理结果</view>	
			</view>  
			<view class="deal_title1">扣款{{info.number}}元</view>
			<view class="deal_title2">配送完次日，收入发放时扣款</view>	
			<view class="order_content_box_heng"></view>
			<view class="order_content_title">
				<view class="order_content_title_xian"></view>
				<view class="order_content_title_text">关联订单</view>	
			</view>  
			<view class="deal_title3">
				完成时间：{{info.order.delivery_at}}
			</view>
			<view class="bond_content_item_order_box">
				<view class="bond_content_item_order_qu">
					<view class="bond_content_item_order_qu_dian"></view>
					<view class="bond_content_item_order_qu_text">{{info.order.sender_address}}</view>	
				</view>
				<view class="bond_content_item_order_song">
					<view class="bond_content_item_order_song_dian"></view>
					<view class="bond_content_item_order_song_text">{{info.order.receiver_address}}</view>
				</view>
			</view>
			<view class="order_content_box_heng"></view>
			<view class="order_content_title">
				<view class="order_content_title_xian"></view>
				<view class="order_content_title_text">违规说明</view>	
			</view>  
			<view class="deal_title4">
				{{info.content}}
			</view>
			<view style="height: 180rpx;"></view>
		</view>
		
		<view class="fix_kf_box" @click="handleShowKf()">
			<image src="https://www.cccshansong.com/chong_weapp/order_detail_icon4.png" mode=""></image><text>客服</text>
		</view>
		<view class="fix_detail_box" v-if="is_refuse==1">
			<view class="scroll_item_order_btn5" hover-class="hover_class" @click.stop="handleApply()">我要申诉</view>	
		</view>
		<wyb-popup ref="kfPopup" type="center" height="364" width='640' radius="16" :zIndex='999999'  :showCloseIcon="false" >
			<view class="kfPopup_content">
				<view class="kf_btn_title">提示</view>
				<view class="kf_btn_title1">请任意选择一种方式联系客服</view>
				<view class="kf_btn_box">
					<view class="kf_btn1" @click="handleKfCall()">拨打电话</view>
					<view class="kf_btn2" @click="handleKfWx()">微信客服</view>
				</view>
			</view>
		</wyb-popup>
		<yk-authpup ref="authpup" :isNativeHead='false' type="top" @changeAuth="changeAuth" :permissionID="permissionID"></yk-authpup>
		<yk-authpup ref="authpupPhoneKf" :isNativeHead='false' type="top" @changeAuth="changeAuthPhoneKf" :permissionID="permissionID"></yk-authpup>
	</view>
	</view>
</template>

<script>
	import ykAuthpup from "@/components/yk-authpup/yk-authpup";
	import zeroLoading from "@/components/zero-loading/components/zero-loading/zero-loading.vue"
	import navigationCustom from "@/components/struggler-navigationCustom/navigation-custom.vue"
	export default {
		components: {
			navigationCustom,
			ykAuthpup,
			zeroLoading
		},
		data() {
			return {
				permissionID:'',
				info:null,
				is_refuse:0,
				refuse_id:0,
				kf_phone:'',
				order_id:0,
				statusHeight: 0,
				config: {
					title: "", //title
					bgcolor: "transparent", //背景颜色
					fontcolor: "#303133", //文字颜色，默认白色
					type: 4, //type 1，3胶囊 2，4无胶囊模式
					transparent: false, //是否背景透明 默认白色
					linear: false, //是为开启下滑渐变
					share: false, //是否将主页按钮显示为分享按钮
					menuIcon: "../../static/icon/back1.png", //当type为3或者4的时候左边的icon文件位置，注意位置与当前页面不一样
					// menuText:"返回", //当type为3或4的时候icon右边的文字
				},
			};
		},
		onLoad(e) {
			var a = this
			a.statusHeight = uni.getSystemInfoSync().statusBarHeight  + 48
			a.order_id = e.order_id
			a.refuse_id = e.refuse_id
			a.is_refuse = e.is_refuse
			a.getConfig()
			a.getDetail()
		},
		onPageScroll(res) {
			var a = this
			if (0 < res.scrollTop <= 60) {
				a.config.bgcolor = 'rgba(255,255,255,0)'
			}
			if (40 < res.scrollTop <= 120) {
				a.opacity = 1
				a.config.bgcolor = 'rgba(255,255,255,0.2)'
			}
			if (60 < res.scrollTop <= 220) {
				a.config.bgcolor = 'rgba(255,255,255,0.4 )'
			}
			if (res.scrollTop > 220) {
				a.config.bgcolor = 'rgba(255,255,255,1)'
			}
			if (res.scrollTop < 50) {
				a.opacity = 0
			}
			if (res.scrollTop == 0) {
				a.opacity = 0
				a.config.bgcolor = 'rgba(255,255,255,0)'
			}
		},
		methods: {
			getDetail(){
				var a =this
				uni.showLoading({
					title:'加载中'
				})
				a.globalajax('wallet/info',{
					id:a.refuse_id
					},'GET',function(res) {
						console.log(res);
						uni.hideLoading()
						uni.stopPullDownRefresh()
						if(res.data.code==200){
							a.info = res.data.data
						}else{
							a.$showModal({
								title:'友情提示',
								content:res.data.msg,
								showCancel:false,
								confirmText:'我知道了',
								success: (res) => {
								}
							}); 
						} 
					}
				); 
			},
			getConfig(){
				var a =this
				a.globalajax('common/getConfig',{
					value:'mobile'
					},'GET',function(res) {
						console.log(res);
						uni.hideLoading()
						uni.stopPullDownRefresh()
						if(res.data.code==200){
							a.kf_phone = res.data.data
						}else{
							a.$showModal({
								title:'友情提示',
								content:res.data.msg,
								showCancel:false,
								confirmText:'我知道了',
								success: (res) => {
								}
							}); 
						} 
					}
				); 
			},
			handleApply(){
				uni.navigateTo({
					url:'/pages/user/appealApply?order_id=' + this.order_id
				})
			},
			customConduct() {
				uni.navigateBack({
					delta: 1
				})
			},
			handleKfWx(){
				var a = this
				a.$refs.kfPopup.hide();
				plus.share.getServices(res => {
					console.log(JSON.stringify(res));
					var sweixin = res.find(i => i.id === 'weixin')
					if (sweixin) {
						// 分享跳转到微信小程序
						sweixin.launchMiniProgram({
							id: "gh_088fa16acaff", // 	关联微信小程序的原始ID（"g_"开头的字符串）   
							path: '/pages/index/kefu', //要打开小程序的路径
							type: 0 // 	微信小程序版本类型，可取值： 0-正式版； 1-测试版； 2-体验版。 默认值为0。
						}, res => {
							console.log('成功唤起微信小程序');
						}, err => {
							console.log('失败');
						})
					} else {
						// 没有获取到微信分享服务
					}		
				}, err => {
					// 获取分享服务列表失败
				});
			},
			handleKfCall(){
				var a = this
				// a.openAuth('CALL_PHONE')
				a.$refs.kfPopup.hide();
				a.openAuthPhoneKf('CALL_PHONE')
			},
			//打开自定义权限目的弹框
			openAuth(permissionID){
				this.permissionID = permissionID;//这个是对应的权限 ACCESS_FINE_LOCATION 位置权限 / WRITE_EXTERNAL_STORAGE 存储空间/照片权限 / CAMERA相机权限 / CALL_PHONE 拨打电话
				setTimeout(()=>{
					this.$refs['authpup'].open();
				},500)
			},
			//用户授权权限后的回调
			changeAuth(){
				var a = this
				//这里是权限通过后执行自己的代码逻辑
				console.log('拨打电话权限已授权，可执行自己的代码逻辑了');
				a.$refs.kfPopup.hide();
				var temp_str = '呼叫'+ a.kf_phone
				uni.showActionSheet({
					itemList: [temp_str],
					success: function(res) {
						console.log(res);
						if (res.tapIndex == 0) {
							uni.makePhoneCall({
								phoneNumber: a.kf_phone,
								success: (res) => {
									console.log('调用成功!')
								},
							})
						}
					}
				})
			},
			handleShowKf(){  
				var a = this
				a.$refs.kfPopup.show();
			},
			//打开自定义权限目的弹框
			openAuthPhoneKf(permissionID){
				this.permissionID = permissionID;//这个是对应的权限 ACCESS_FINE_LOCATION 位置权限 / WRITE_EXTERNAL_STORAGE 存储空间/照片权限 / CAMERA相机权限 / CALL_PHONE 拨打电话
				setTimeout(()=>{
					this.$refs['authpupPhoneKf'].open();
				},500)
			},
			changeAuthPhoneKf(){
				var a = this
				//这里是权限通过后执行自己的代码逻辑
				console.log('拨打电话权限已授权，可执行自己的代码逻辑了');
				var temp_str = '呼叫'+ a.kf_phone
				uni.showActionSheet({
					itemList: [temp_str],
					success: function(res) {
						console.log(res);
						if (res.tapIndex == 0) {
							uni.makePhoneCall({
								phoneNumber: a.kf_phone,
								success: (res) => {
									console.log('调用成功!')
								},
							})
						}
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #fff;
	}

	.top_nav_box {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 10;
	}

	.page_item_bj {
		width: 750rpx;
		height: 664rpx;
		background-image: url('../../static/images/png03.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 0;
	}

	.page_content_box {
		width: 750rpx;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1;
		.iolation_reason_box{
			padding: 24rpx; 
			font-size: 48rpx;
			color: rgba(36, 40, 49, 1);
			font-weight: bold;
		}
		.order_content_box_heng{
			background-color: rgba(235, 238, 245, 1);
			width: 750rpx;
			height: 2rpx;
			margin: 24rpx 0;
		}
		.order_content_title{
			display: flex;
			align-items: center;
			margin-bottom: 20rpx;
			margin-left: 24rpx;
			.order_content_title_xian{
				width: 2rpx;
				height: 36rpx;
				background-color: rgba(255, 107, 0, 1);
			}
			.order_content_title_text{
				font-weight: bold;
				color: rgba(36, 40, 49, 1);
				font-size: 36rpx;
				margin-left:14rpx ;
			}
		}
		.deal_title1{
			padding: 0 40rpx;
			color: rgba(36, 40, 49, 1);
			font-size: 28rpx;
			font-weight: bold;
		}
		.deal_title2{
			padding: 0 40rpx;
			color: rgba(96, 98, 102, 1);
			font-size: 28rpx;
		}
		.deal_title3{
			padding-left: 40rpx;
			color: rgba(36, 40, 49, 1);
			font-size: 30rpx;
		}
		.deal_title4{
			padding: 0 40rpx;
			color: rgba(96, 98, 102, 1);
			font-size: 26rpx;
			line-height: 40rpx;
		}
		.bond_content_item_order_box{
			margin-top: 16rpx;
			padding-bottom: 20rpx;
			margin-left: 20rpx;
			.bond_content_item_order_qu{
				display: flex;
				align-items: center;
				.bond_content_item_order_qu_dian{
					width: 12rpx;
					height: 12rpx;
					background-color: rgba(255, 107, 0, 1);
					border-radius: 50%;
					margin-left: 24rpx;
					margin-right: 14rpx;
				}
				.bond_content_item_order_qu_text{
					width: 540rpx;
					white-space: nowrap;
				    text-overflow: ellipsis;
				    overflow: hidden;
				    word-break: break-all;	
					color: rgba(96, 98, 102, 1);
					font-size: 28rpx;
				}
			}
			.bond_content_item_order_song{
				display: flex;
				align-items: center;
				padding-top: 10rpx;
				.bond_content_item_order_song_dian{
					width: 12rpx;
					height: 12rpx;
					background-color: rgba(3, 214, 214, 1);
					border-radius: 50%;
					margin-left: 24rpx;
					margin-right: 14rpx;
				}
				.bond_content_item_order_song_text{
					width: 540rpx;
					white-space: nowrap;
				    text-overflow: ellipsis;
				    overflow: hidden;
				    word-break: break-all;	
					color: rgba(96, 98, 102, 1);
					font-size: 28rpx;
				}
			}
		}
	}
	.fix_kf_box{
		position: fixed;
		z-index: 999997;
		right: 24rpx;
		bottom: 190rpx;
		width: 88rpx;
		height: 88rpx;
		border-radius: 50%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background-color: #fff;
		box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.1); 
		image{ 
			width: 40rpx;
			height: 40rpx;
		}
		text{
			color: rgba(36, 40, 49, 1);
			font-size: 20rpx;
		}
	}
	.fix_detail_box{
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 999997;
		width: 750rpx;
		padding-top: 16rpx;
		box-shadow: 0rpx 0rpx 26rpx 0rpx rgba(0,0,0,0.0800);
		padding-bottom: calc(16rpx +  constant(safe-area-inset-bottom));
		padding-bottom: calc(16rpx +  env(safe-area-inset-bottom));
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		.scroll_item_order_btn1{
			width: 228rpx;
			height: 88rpx;
			line-height: 88rpx;
			text-align: center;
			color: #fff;
			background-color: rgba(255, 168, 0, 1);
			border-radius: 12rpx;
			font-size: 32rpx;
			margin-right: 20rpx;
		}
		.scroll_item_order_btn2{
			width:454rpx;
			height: 88rpx;
			line-height: 88rpx;
			text-align: center;
			color: #fff;
			background-color: rgba(255, 107, 0, 1);
			border-radius: 12rpx;
			font-size: 32rpx;
		}
		.scroll_item_order_btn3{
			// height: 88rpx;
			// line-height: 88rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			padding: 0 16rpx;
			margin-right: 20rpx;
			text{
				color: rgba(36, 40, 49, 1);
				font-size: 24rpx;
			}
			image{
				width: 48rpx;
				height: 48rpx;
			}
		}
		.scroll_item_order_btn4{
			width: 464rpx;
			height: 88rpx;
			line-height: 88rpx;
			text-align: center;
			color: #fff;
			background-color:rgba(0, 117, 255, 1);
			border-radius: 12rpx;
			font-size: 32rpx;
			margin-left: 36rpx;
		}
		.scroll_item_order_btn5{
			width:702rpx;
			height: 80rpx; 
			line-height:  80rpx;  
			text-align: center;
			color: rgba(0, 117, 255, 1);
			border-radius: 12rpx;
			font-size: 32rpx;
			border: 2rpx solid rgba(0, 117, 255, 1);
		}
	}	
	.kfPopup_content{
		width: 640rpx;
		height: 364rpx;
		background-image: url('https://www.cccshansong.com/chong_weapp/order_detail_icon5.png');
		background-size: 100% 100%;
		.kf_btn_title{
			text-align: center;
			font-size: 44rpx;
			padding: 36rpx 0;
			font-weight: bold;
		}
		.kf_btn_title1{
			text-align: center;
			font-size: 32rpx;
			font-weight: bold;
		}
		.kf_btn_box{
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 66rpx;
			.kf_btn1{
				width: 280rpx;
				height: 80rpx;
				text-align: center;
				line-height: 80rpx;
				color: rgba(255, 107, 0, 1);
				font-size: 30rpx;
				border-radius: 16rpx;
				border: 2rpx solid rgba(255, 107, 0, 1);
			}
			.kf_btn2{
				width: 280rpx;
				height: 80rpx;
				text-align: center;
				line-height: 80rpx;
				color: #fff;
				font-size: 30rpx;
				border-radius: 16rpx;
				border: 2rpx solid rgba(255, 107, 0, 1);
				background-color: rgba(255, 107, 0, 1);
				position: relative;
				margin-left: 30rpx;
				.leftBox{
					position: absolute;
					top: 0;
					left: 0;
					width: 280rpx;
					height: 80rpx;
					opacity: 0;
				}
			}
		}
	}
</style>